<template>
	<draggable v-my-directive :data-title="title" :data-description="description" :list="list" item-key="id" :disabled="true">
		<template #item="{ element, index }">
			<div :id="element.id ? element.id : ''" class="divcss">
				<page :data="element" :logo="logo" :defaultchanid="defaultchanid"></page>
			</div>
		</template>
	</draggable>
</template>
<script>
	import { dataRequest as api } from '@/api/api'
	import draggable from 'vuedraggable'
	import page from '@/components/page/page.vue'
	import store from './../store'
	export default {
		components: {
			draggable,
			page,
		},
		data() {
			return {
				defaultchanid: '0',
				logo: null,
				list: [],
				title: 'DEXC区块链自助建站系统',
				description: '区块链自主建站系统',
				domain: window.location.hostname.toLowerCase().replace(/^www\./, ''),
			}
		},
		methods: {
			async getdata() {
				try {
					let array = await api('Query', 'websettings', { domain: this.domain })
					if (array.code == 200) {
						this.logo = array.data.logo
						this.title = array.data.title
						this.description = array.data.description
					}

					// 获取钱包代理
					let acting = await api('Query', 'acting', { domain: this.domain })
					if (acting.code == 200) {
						store.commit('setActing', acting.data.address)
					}

					let arr = await api('Query', 'parameters', { domain: this.domain, page: 'index' })

					if (arr.code == 200 && arr.data) {
						this.list = arr.data.Configuration
						//   语言到时候在网站app.vue 内设置 避免每次刷新都变动
						for (let i = 0; i < this.list.length; i++) {
							if (this.list[i].Classification == 'header') {
								this.$i18n.locale = this.list[i].web.language
							}
							if (this.list[i].Classification == 'swap' && this.list[i].swap.chanid) {
								this.defaultchanid = this.list[i].swap.chanid
							}
						}

						const yourQueryParam = this.$route.query.web
						if (yourQueryParam) {
							setTimeout(() => {
								this.position(yourQueryParam)
							}, 100)
						}
					}
				} catch (error) {
					console.error(error)
				}
			},
			position(id) {
				const element = document.getElementById(id)
				if (element) {
					element.scrollIntoView({
						behavior: 'smooth', // 平滑滚动
						block: 'start', // 滚动到元素顶部位置
					})
				}
			},
		},
		mounted() {
			this.getdata()
			this.$watch(
				() => this.$route.query.web, // 监听特定的查询参数变化
				(newValue, oldValue) => {
					// 执行当查询参数变化时的逻辑
					this.position(newValue)
					// 在这里可以进行相应的操作，比如重新获取数据等
				},
			)
		},
	}
</script>
<!-- 网站首页 -->
